{% extends "base.html" %}
{% load szachy_tags %}

{% block extra_header %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
  <script src="{{ MEDIA_URL }}szachy/jquery_plugins/jquery.jnotify.min.js"></script>
  <script src="{{ MEDIA_URL }}szachy/js/board.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/overcast/jquery-ui.css"/> 
  <link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}szachy/jquery_plugins/jquery.jnotify-alt.css" />
{% endblock %}


{% block content %}
<div class="span-10">  
  {% if top_player %}
    {{ top_player }}
  {% else %}  
    <a href="{% url select_side game_id=game.id,side=top_side %}" class="button">Sit here!</a>    
  {% endif %}
  
  <!-- <div><fb:profile-pic uid="{{ top_player }}"></fb:profile-pic></div><span><fb:name uid="{{ top_player }}" capitalize="true" linked="false" /></span>-->
  <div class="board" id="board">
    {{ board }}
  </div>
      
  {% if bottom_player %}
    {{ bottom_player }}
  {% else %}
    <a href="{% url select_side game_id=game.id,side=bottom_side %}" class="button">Sit here!</a>
  {% endif %}
  <div>
  
  <form action="{% url make_move game_id=game.id %}" method="POST" id="move_form">
  {{ form }}
  <input type="submit" value="Make move!" />
  </form>
  <script>           
    my_move_ajax_url = '{% url my_move_ajax game_id=game_id %}';
    get_board_ajax_url = '{% url get_chessboard game_id=game_id %}';
    my_move = {{ my_move|lower }};    
    media_url = '{{ MEDIA_URL }}';
  </script>  
  </div>
 </div>
  <div class="prepend-1 span-3">
     <h3>Moves</h3>
     <div id="movelist">
      {{ moves_list|linebreaksbr }}
     </div>
  </div>

  
{% endblock %}
